Skip to content

fix: improve DND drag feedback in EditableSchemaForm#8449

Merged
rubenfiszel merged 1 commit intomainfrom
dnd-drag-feedback-follow
Mar 19, 2026
Merged

fix: improve DND drag feedback in EditableSchemaForm#8449
rubenfiszel merged 1 commit intomainfrom
dnd-drag-feedback-follow

Conversation

@rubenfiszel
Copy link
Contributor

Summary

Fixes drag-and-drop feedback in EditableSchemaForm: the dragged field now visually follows the cursor from the start, shows a dashed blue drop-target placeholder, and doesn't jump positions on small movements.

Changes

  • Add morphDisabled: true to DND config — prevents the library from copying dimensions from an uninitialized ResizeTransitionWrapper shadow (0 height), which made the floating clone invisible
  • Style shadow element as a dashed blue drop-target indicator (!visible overrides the library's inline visibility: hidden that was inconsistently cleared by RTW's reactive style binding)
  • Add 200ms grace period after drag start before processing reorder events, preventing immediate position jumps from small cursor movements

Test plan

  • Open a Script or Flow input editor with multiple fields
  • Drag a field using the grip handle — verify the floating clone immediately follows the cursor
  • Verify a dashed blue placeholder appears at the drop target position
  • Verify small movements (< ~20px) don't cause the field to jump to a new position
  • Verify reordering works normally after the initial grace period
  • Test in both light and dark mode

Generated with Claude Code

Three issues fixed:
- Dragged element clone was invisible because morphDraggedElementToBeLike
  ran before the clone was in the DOM, copying 0-height from the
  uninitialized ResizeTransitionWrapper shadow. Fixed with morphDisabled.
- Shadow placeholder was inconsistently hidden because the DND library's
  inline visibility:hidden was overwritten by RTW's reactive style binding.
  Fixed with !visible CSS class that overrides inline styles.
- Small cursor movements immediately triggered field reordering. Added a
  200ms grace period after drag start before processing reorder events.

The shadow element now shows a dashed blue drop-target indicator instead
of being fully hidden.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link

Deploying windmill with  Cloudflare Pages  Cloudflare Pages

Latest commit: 03ee30b
Status: ✅  Deploy successful!
Preview URL: https://3a5df891.windmill.pages.dev
Branch Preview URL: https://dnd-drag-feedback-follow.windmill.pages.dev

View logs

@rubenfiszel rubenfiszel marked this pull request as ready for review March 19, 2026 09:15
@rubenfiszel rubenfiszel merged commit fd7f0d3 into main Mar 19, 2026
13 checks passed
@rubenfiszel rubenfiszel deleted the dnd-drag-feedback-follow branch March 19, 2026 09:15
@claude
Copy link
Contributor

claude bot commented Mar 19, 2026

Claude Code is working…

I'll analyze this and get back to you.

View job run

@github-actions github-actions bot locked and limited conversation to collaborators Mar 19, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant